<template>
  <commonBox title="部门资产详情">
    <div class="list-content">
      <div class="search-content">
        <el-input
          v-model="searchName"
          placeholder="请输入部门名称"
          clearable
          style="width: 250px; margin-right: 10px"
          @clear="clearSearch"
          @keyup.enter="handleSearch"
        ></el-input>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
        <el-button @click="clearSearch">清空</el-button>
      </div>
      <div class="list-header">
        <div class="header-item" v-for="item in title">{{ item }}</div>
      </div>
      <div class="item-container">
        <div class="item-list" v-for="item in zcList">
          <div class="department-item">{{ item.name }}</div>
          <div class="department-item">{{ item.number }}</div>
          <div class="department-item">{{ item.value }}</div>
          <div class="department-item">{{ item.office }}</div>
          <div class="department-item">{{ item.idleAssetCount }}</div>
          <div class="department-item">{{ item.noAsset }}</div>
          <div class="department-item show-info" @click="openInfo(item)">
            查看详情
          </div>
        </div>
      </div>
    </div>
  </commonBox>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import commonBox from "../commonBox.vue";
import { ElMessage } from "element-plus";
import { useStore } from "vuex";
const store = useStore();
const router = useRouter();
const props = defineProps({
  departmentAssetDetail: {
    type: Array,
    default: () => [],
  },
});
const title = ref([
  "部门",
  "人数",
  "资产总数",
  "办公设备数量",
  "闲置资产数",
  "无资产人员数量",
  "操作",
]);
const zcList = ref([]);
const searchName = ref("");
function handleSearch() {
  if (!searchName.value) {
    ElMessage("请输入搜索条件或者点击清空");
    return;
  }
  zcList.value = props.departmentAssetDetail.filter((item) => {
    return item.name.includes(searchName.value);
  });
}
function clearSearch() {
  searchName.value = "";
  zcList.value = props.departmentAssetDetail;
}
zcList.value = props.departmentAssetDetail;
function openInfo(item) {
  router.push({
    name: "info",
    query: {
      id: item.id,
    },
  });
  window.localStorage.setItem("departmentInfo", JSON.stringify(item));
  store.commit("setCurrentDepartmentInfo", item);
}
</script>

<style scoped lang="less">
@import "@/styles/common.less";

.list-content {
  .common-list();

  .search-content {
    .align-center();
  }
}
</style>
